<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <!-- 本地 -->
    <script src="../js/jquery-1.10.1.min.js"></script>
    <style>
        * {
            padding: 0;
            margin: 0;
        }

        li {
            list-style: none;
        }

        #tips {
            background-color: grey;
            line-height: 45px;
        }

        .list {
            padding: 10px 0;
            background-color: #f1f1f1;
            overflow: hidden;
        }

        .list li {
            height: 32px;
            line-height: 32px;
            border: 1px dashed #333;
        }

        .list .newLi {
            border-color: red;
        }

        .list .active {
            background-color: #6ff;
        }

        label {
            border: 1px dashed #333;
        }
    </style>

</head>

<body>
    <!-- <form>
        <input disabled type="button" value="Input Button" />
        <input type="checkbox" />

        <input type="file" />
        <input type="hidden" />
        <input type="image" src="" />

        <input type="password" />
        <input type="radio" />
        <input type="reset" />

        <input type="submit" />
        <input type="text" />
        <select>
            <option>Option</option>
        </select>

        <textarea></textarea>
        <button>Button</button>

    </form> -->
    <!-- <p>爱好:</p>
    <label>唱歌:<input type="checkbox" value="sing"></label>
    <label>跳舞:<input type="checkbox" value="dance"></label>
    <label>玩游戏:<input type="checkbox" value="play"></label>
    <label>学习:<input type="checkbox" value="study"></label> -->

    <select class="sel">
        <option value="">请选择</option>
        <option value="A001">北京</option>
        <option value="A002">上海</option>
        <option value="A003">湖北</option>
    </select>


</body>
<script>
    // :input 匹配所有 input, textarea, select 和 button 元素
    // console.log($(":input"));

    // :text 
    // :password 
    // :radio 
    // :checkbox 
    // :submit 
    // :image 
    // :reset 
    // :button 
    // :file 
    // :hidden

    // :checked   匹配所有选中的被选中元素(复选框、单选框等)
    // $("input[type='checkbox']").click(function () {
    //     console.log($("input[type='checkbox']:checked"));
    //     // each
    //     // var arr = [];
    //     // $("input[type='checkbox']:checked").each(function (index, ele) {
    //     //     arr.push($(this).val());
    //     // })
    //     // console.log(arr);

    //     // map   => jquery的伪数组
    //     var list = $("input[type='checkbox']:checked").map(function (index, ele) {
    //         return $(this).val();
    //     }).get();
    //     console.log(list);

    // })

    // :selected   匹配所有选中的option元素   $(".sel option:selected")

    $(".sel").change(function () {
        // var val = $(this).val();
        // console.log(val);
        console.log($(".sel option:selected"));
        console.log($(".sel option:selected")[0], this.selectedOptions[0]);
        console.log($(".sel option:selected").html());
    })


</script>

</html>